הוספת לחצן פעולה צף

כדאי לנסות את התכונה 'כתיבה מהירה'
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך מוסיפים רכיבים ב-Compose
לחצן פעולה צף →

לחצן פעולה צף (FAB) הוא לחצן עגול שמפעיל את הפעולה הראשית בממשק המשתמש של האפליקציה. בדף הזה מוסבר איך להוסיף את הלחצן הגדול לממשק, להתאים אישית חלק מהמראה שלו ולהגיב להקשות על הלחצן.

מידע נוסף על עיצוב כפתור פעולה צף באפליקציה בהתאם להנחיות של Material Design זמין במאמר לחצנים: כפתור פעולה צף.

איור 1. לחצן פעולה צף

הוספת לחצן הפעולה הצף לפריסת האתר

הקוד הבא מראה איך ה-FloatingActionButton אמור להופיע בקובץ הפריסה: 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

כברירת מחדל, הלחצן המהיר מקבל את הצבע של המאפיין colorAccent, שאפשר להתאים אישית באמצעות לוח הצבעים של העיצוב.

אפשר להגדיר מאפיינים אחרים של FAB באמצעות מאפייני XML או שיטות תואמות, כמו:

  • הגודל של הלחצן המהיר, באמצעות המאפיין app:fabSize או השיטה setSize().
  • צבע הרטט של הלחצן המהיר, באמצעות המאפיין app:rippleColor או השיטה setRippleColor().
  • סמל ה-FAB, באמצעות המאפיין android:src או השיטה setImageDrawable().

תגובה להקשות על כפתורים

לאחר מכן תוכלו להחיל View.OnClickListener כדי לטפל בהקשות על ה-FAB. לדוגמה, הקוד הבא מציג את ה-Snackbar כשהמשתמש מקייש על הלחצן המהיר:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

למידע נוסף על היכולות של FAB, ראו הפניית ה-API של FloatingActionButton.